<template>
  <div class="app-container">
    <el-form ref="elForm" :model="params" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="费用名称">
            <el-input v-model="params.feeName" placeholder="请输入费用名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="open">添加费用</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="fees" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="id" prop="id" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="费用名称" prop="feeName" align="center">
        <template slot-scope="{row}">
          <span>{{row.feeName}}</span>
        </template>
      </el-table-column>

      <el-table-column label="费率" prop="feeBase" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ new Number(row.feeBase).toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="启用" prop="available" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{row.available}}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" prop="remark" align="center">
        <template slot-scope="{row}">
          <span>{{row.remark}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="checkDict(row)">编辑费用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="params.pageSize"
      layout="prev, pager, next"
      :total="params.totalCount"
      @prev-click="search(-1)"
      @next-click="search(1)"
    ></el-pagination>

    <el-dialog :title="title" :visible.sync="dialogVisible">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="费用名称" prop="feeName">
          <el-input
            v-model="formData.feeName"
            placeholder="请输入费用名称"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="费率" prop="feeBase" required>
          <el-input-number v-model="formData.feeBase" :precision="2" :step="0.1" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input
            v-model="formData.remark"
            placeholder="请输入备注说明"
            clearable
            :style="{width: '100%'}"
          ></el-input>
        </el-form-item>
        <el-form-item label="启用" prop="available" required>
          <el-switch v-model="formData.available"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addSysDict">确定</el-button>
      </div>
    </el-dialog>

    <!--<el-dialog :title="itemTitle" :visible.sync="dialogItemVisible">
      <el-form
        ref="itemForm"
        :model="itemData"
        :rules="itemRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="选项名" prop="key">
          <el-input v-model="itemData.key" placeholder="选项名" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="选项值" prop="val">
          <el-input v-model="itemData.val" placeholder="请输入选项值" clearable :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="启用" prop="available" required>
          <el-switch v-model="itemData.available"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>-->

    <!--<el-dialog :title="targetDict.dictionaryName" :visible.sync="dialogDictVisible">
      <el-table :data="items" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="选项名称" prop="key" align="center">
          <template slot-scope="{row}">
            <span>{{row.key}}</span>
          </template>
        </el-table-column>

        <el-table-column label="选项值" prop="val" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{row.val}}</span>
          </template>
        </el-table-column>

        <el-table-column label="启用" prop="available" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{row.available}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" prop="id" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" @click="editDictItem(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>-->
  </div>
</template>

<script>

import {
  getFees,
  editFees
} from "@/api/fee";

export default {
  name: "fee",

  components: {},
  props: [],
  data() {
    return {
      dialogVisible: false,
      dialogItemVisible: false,
      dialogDictVisible: false,
      title: "新增收费",
      itemTitle: "添加收费项",
      fees: [],
      items: [],
      params: {
        page: 0,
        totalCount: 0,
        totalPage: 1,
        pageSize: 20
      },
      pages: {},
      formData: {
        available: true
      },
      rules: {
        feeName: [
          {
            required: true,
            message: "请输入费用名称",
            trigger: "blur"
          }
        ],
        feeBase: [
          {
            required: false,
            message: "请输入费率",
            trigger: "blur"
          }
        ]
      },
      itemData: {
        key: "",
        val: "",
        available: true
      },
      itemRules: {
        key: [
          {
            required: true,
            message: "选项名",
            trigger: "blur"
          }
        ],
        val: [
          {
            required: true,
            message: "请输入选项值",
            trigger: "blur"
          }
        ]
      },
      targetDict: {}
    };
  },
  computed: {},
  watch: {},
  created() {
    window.app = this;
    this.search();
  },
  mounted() {},
  filters: {
    formatter(d) {
      return new Date(d).Format("yyyy-MM-dd");
    }
  },
  methods: {
    search(n) {
      if (typeof n === "number") {
        this.params.page = this.params.page + n;
      }
      getFees(this.params).then(response => {
        if (response.code === 200) {
          this.fees = response.page.list;
          this.params.page = response.page.currPage;
          this.params.totalPage = response.page.totalPage;
          this.params.totalCount = response.page.totalCount;
        }
      });
    },
    addSysDict() {
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        editFees(this.formData).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success"
            });
          }
        });
        this.params.page = 0;
        this.search();
        this.close();
      });
    },
    open() {
      this.title = "新增费用";
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    },
    checkDict(d) {
      this.title = "编辑费用";
      this.dialogVisible = true;
      this.formData = d;
    },
    addDictItem(d) {
      this.itemData.dictId = d.id;
      this.dialogItemVisible = true;
      this.itemTitle = "添加费用项";
    },
    handelConfirm() {
      this.$refs["itemForm"].validate(valid => {
        if (!valid) return;
        editdetial(this.itemData).then(response => {
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: "success"
            });
            this.itemData = {};
            //编辑费用项需要刷新展示框
            if (this.dialogDictVisible) {
              this.showItem(this.targetDict);
            }
          }
        });
        this.dialogItemVisible = false;
        this.close();
      });
    },
    showItem(row) {
      this.targetDict = row;
      this.dialogDictVisible = true;
      searchDict({ id: row.id }).then(response => {
        if (response.code === 200) {
          this.items = response.page;
        }
      });
    },
    editDictItem(d) {
      this.itemData = d;
      this.dialogItemVisible = true;
      this.itemTitle = "编辑费用项";
    }
  }
};
</script>

<style scoped>
</style>
